<template>
	<view>
		<toTop :scrollTop='scrollTop' @toTop='toTop'></toTop>
		<view class="app-header-wrapper">
			<view class="app-header-left">
				<view class="app-header-item">
					<view class="image-icons app-header-icon icon-back" @click="Back">
						<image src="../../static/images/left_b.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="app-header-middle">
				<view class="app-header-title text-ellipsis">
					购物车
				</view>
			</view>
			<view class="app-header-right">
				<template v-if="itemIds.length!==0">
					<text v-if="!isEdit" @click="isEdit=true">编辑</text>
					<text v-else @click="isEdit=false">完成</text>
				</template>


			</view>
		</view>
		<view class="app-view">
			<view class="login-head" v-if="isShow">
				<view class="login-inner" @click="toLogin">
					<view class="inner-left">
						登录后享受更多优惠
					</view>
					<view class="inner-right el-flex">
						<text>去登录</text>
						<image src="../../static/images/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="cart-view" v-if="itemIds.length==0">
				<u-empty mode="car" icon="../../static/images/car.png">
					<view class="btn">
						随便看看
					</view>
				</u-empty>
			</view>
			<view class="" style="height: .32rem;"></view>
			<template v-if="itemIds.length!==0">
				<cartItem :itemIds='itemIds' @addPack='addPack' @changeParentCart='changeParentCart'
					@editCartNumber='editCartNumber' @selectServeItem='selectServeItem' @selectItem='selectItem'
					@deleteSelect='deleteSelect'></cartItem>
			</template>
			<view class="title-head el-flex">
				<view class="h">
					<view class="bg bg-l"></view>
				</view>
				<view class="m">
					精选好物
				</view>
				<view class="h">
					<view class="bg bg-r"></view>
				</view>
			</view>
			<view class="good-view">
				<view class="view-data">
					<view class="view-item" v-for="(item,index) in recommendList" :key="index"
						@click="toProDatail(item)">
						<view class="img-box" v-if="item.data.goods">
							<LazyLoad width="3.3rem" height="3.3rem" :src="item.data.goods.img800"></LazyLoad>
						</view>
						<view class="info-box" v-if="item.data.goods">
							<view class="name">
								{{item.data.goods.name}}
							</view>
							<view class="tags el-flex">
								<template v-if="item.data.goods.labelGroup.abovePrice">
									<view class="tags-item"
										v-for="(i,j) in item.data.goods.labelGroup.abovePrice.slice(0,2)" :key="j">
										<text>{{i.name}}</text>
									</view>
								</template>
							</view>
							<view class="price">
								<text class="cur">
									¥
								</text>
								<text class="num"> {{item.data.goods.priceInfo.singlePrice.price/100}}</text>
								<text class="qi" v-if="item.data.goods.priceInfo.priceTag">起</text>
								<text class="del"
									v-if="item.data.goods.priceInfo.singlePrice.price!=item.data.goods.priceInfo.marketPrice">¥{{item.data.goods.priceInfo.marketPrice/100}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="pay-bottom el-flex  maxW" v-if="itemIds.length!==0">
			<view class="pay-bottom-left el-flex">
				<view class="bottom-left el-flex" @click="deleteSelect(!AllSelect)">
					<view class="icon">
						<template v-if="AllSelect">
							<image src="../../static/images/cart_checkbox_select_icon.png" mode=""></image>
						</template>
						<template v-else>
							<image src="../../static/images/cart_checkbox_unselect_icon.png" mode=""></image>
						</template>
					</view>
					<view class="all">
						全选
					</view>
				</view>
				<template v-if="!isEdit">
					<view class="bottom-right el-flex">
						<view class="bottom-right-t el-flex">
							<view class="right-t-l">
								合计
							</view>
							<view class="right-t-m">
								(不含运费):
							</view>
							<view class="right-t-r">
								<text class="cur">¥</text>
								<text class="price-r">{{AllSelectServerMoney+AllSelectMoney+AllSelectPackMoney}}</text>
							</view>
						</view>
						<view class="bottom-right-b">
							<view class="b-inner el-flex">
								<view class="b-inner-l">
									免运费
								</view>
								<view class="b-inner-r el-flex">
									<text>明细</text>
									<image src="../../static/images/cart_fee_arrow_down_red.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="pay-bottom-right">
				<template v-if="!isEdit">
					<view class="pay-bottom-right-btn el-flex" @click="toCheckOut">
						结算({{AllSelectTotal+AllSelectServerTotal+AllSelectPack}})
					</view>
				</template>
				<template v-else>
					<view class="tow-btn el-flex">
						<view class="tow-btn-l el-flex">
							移入收藏({{AllSelectTotal+AllSelectServerTotal+AllSelectPack}})
						</view>
						<view class="tow-btn-r el-flex" @click="deleteAll">
							删除({{AllSelectTotal+AllSelectServerTotal+AllSelectPack}})
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	import cartItem from '../../components/cart-item/cart-item.vue'
	import toTop from '../../components/getTop/getTop.vue'
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	import showModal from '../../common/js/showModal.js'
	export default {
		components: {
			cartItem,
			LazyLoad,
			toTop
		},
		data() {
			return {
				isEdit: false,
				itemIds: [],
				isShow: null,
				pageIdx: 1,
				recommendList: [],
				itemIds: [],
				goods_info: [],
				scrollTop: 0,
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		computed: {
			AllSelectTotal() {
				let total = 0
				this.itemIds.forEach(i => {
					if (i.item.isSelect) {
						total += i.count
					}
				})
				return total;
			},
			AllSelectServerTotal() {
				let total = 0
				let list = this.itemIds
				for (var i = 0; i < list.length; i++) {
					if (list[i].item.isSelect) {
						for (var j = 0; j < list[i].item.multi_service_bargins.first.length; j++) {
							let arr = list[i].item.multi_service_bargins.first[j]
							arr.service_info.forEach(k => {
								if (k.isSelect) {
									total += 1
								}
							})
						}
					}
				}
				return total;
			},
			AllSelect() {
				return this.itemIds.every(i => i.item.isSelect)
			},
			AllSelectMoney() {
				let total = 0
				this.itemIds.forEach(i => {
					if (i.item.isSelect) {
						total += Number(i.item.price) * i.count
					}
				})
				return total;
			},
			AllSelectPack() {
				let total = 0
				let list = this.itemIds
				for (var i = 0; i < list.length; i++) {
					if (list[i].item.isSelect) {
						for (var j = 0; j < list[i].item.packageList.length; j++) {
							let arr = list[i].item.packageList[j]
							if (list[i].item.packageList[j].isSelect) {
								total += 1
							}
						}
					}
				}
				return total;
			},
			AllSelectArr() {
				let arr = []
				let list = this.itemIds
				for (var i = 0; i < list.length; i++) {
					if (list[i].item.isSelect) {
						arr.push(list[i].item.goods_id)
					}
				}
				return arr;
			},
			AllSelectServerMoney() {
				let total = 0
				let list = this.itemIds
				for (var i = 0; i < list.length; i++) {
					if (list[i].item.isSelect) {
						for (var j = 0; j < list[i].item.multi_service_bargins.first.length; j++) {
							let arr = list[i].item.multi_service_bargins.first[j]
							arr.service_info.forEach(k => {
								if (k.isSelect) {
									total += Number(k.service_price)
								}
							})
						}
					}
				}
				return total;
			},
			AllSelectPackMoney() {
				let total = 0
				let list = this.itemIds
				for (var i = 0; i < list.length; i++) {
					if (list[i].item.isSelect) {
						for (var j = 0; j < list[i].item.packageList.length; j++) {
							if (list[i].item.packageList[j].isSelect) {
								total += Number(list[i].item.packageList[j].act_price)
							}
						}
					}
				}
				return total;
			},
		},
		onReachBottom() {
			if (this.pageIdx == 81) return;
			this.pageIdx += 40
			this.get_merge_rec(true)
		},
		methods: {
			addPack(obj) {
				let index = obj.index
				let packIndex = obj.packIndex
				let flag = obj.flag
				if (flag) {
					this.$set(this.itemIds[index].item.packageList[packIndex], 'isSelect', false)
				} else {
					this.$set(this.itemIds[index].item.packageList[packIndex], 'isSelect', true)
				}
			},
			toCheckOut() {
				let self = this
				let list = this.itemIds.filter(item => item.item.isSelect)
				if (list.length === 0) {
					this.$refs.uToast.show({
						type: 'default',
						message: "请勾选需要结算的商品",
					})
					return;
				} else {
					let selectList = []
					list.forEach(item => {
						let serveArr = []
						let serveList = item.item.multi_service_bargins.first
						for (var i = 0; i < serveList.length; i++) {
							for (var j = 0; j < serveList[i].service_info.length; j++) {
								let k = serveList[i].service_info[j]
								if (k.isSelect) {
									serveArr.push({
										name: k.service_name,
										price: k.service_price,
										count: 1,
										market_price: k.service_price,
										service_type_name: serveList[i].service_type_name
									})
								}
							}
						}
						let packageList = item.item.packageList
						let arr = []
						if (packageList.length !== 0) {
							packageList.forEach(i => {
								if (i.isSelect) {
									let obj = i.goods_list[0]
									arr.push({
										name: obj.goods_name,
										img_url: obj.goods_img,
										price: i.act_price,
										count: 1,
										goods_id: obj.goods_id,
										market_price: obj.goods_price,
									})
								}
							})
						}
						let obj = {
							name: item.item.name,
							img_url: item.item.img_url,
							price: item.item.price,
							count: item.count,
							goods_id: item.item.goods_id,
							market_price: item.item.market_price,
							packageList: arr,
							serveArr: serveArr
						}
						selectList.push(obj)
					})
					self.addPayData(selectList)
				}
			},
			addPayData(items, callback) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/addPayData',
					method: 'POST',
					data: {
						items: items,
					},
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							uni.navigateTo({
								url: '/subPage/checkout/checkout',
							})
						} else if (res.data.code == 401) {
							showModal()
						}
					},
					fail: function(err) {

					}
				})
			},
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0,
				})
			},
			changeParentCart() {
				this.getCartData()
			},
			deleteShopFilter(arr1, arr2) {
				return arr2.filter(
					(e) => arr1.filter((x) => e.item.goods_id != x).length == arr1.length
				);
			},
			deleteAll() {
				let self = this
				if (this.AllSelectArr.length == 0) {
					this.$refs.uToast.show({
						type: 'default',
						message: "你还未勾选商品哦",
					})
					return;
				}
				uni.showModal({
					title: "温馨提示",
					content: `确认要将这${this.AllSelectTotal}件商品删除？`,
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: "#815EC9",
					success: (res) => {
						if (res.confirm) {
							self.deleteCartData(self.AllSelectArr, res => {
								if (res) {
									self.itemIds = self.deleteShopFilter(self.AllSelectArr, self
										.itemIds)
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			deleteCartData(goods_id, callback) {
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/deleteCartData',
					method: 'POST',
					data: {
						goods_id: goods_id
					},
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							callback(true)
						} else {
							callback(false)
						}
					},
					fail: function(err) {
						callback(false)
					}
				})
			},
			selectServeItem(data) {
				let obj = data.obj
				let goodIndex = data.goodIndex
				let serveIndex = obj.serveIndex
				let childIndex = obj.childIndex
				let list = this.itemIds[goodIndex].item.multi_service_bargins.first
				for (var i = 0; i < list[serveIndex].service_info.length; i++) {
					if (i == childIndex) {
						if (list[serveIndex].service_info[childIndex].isSelect) {
							this.$set(list[serveIndex].service_info[childIndex], 'isSelect', false)
						} else {
							this.$set(list[serveIndex].service_info[childIndex], 'isSelect', true)
						}
					} else {
						this.$set(list[serveIndex].service_info[i], 'isSelect', false)
					}
				}
			},
			deleteSelect(flag) {
				this.itemIds.forEach((i, j) => {
					this.$set(this.itemIds[j].item, 'isSelect', flag)
				})
			},
			selectItem(index) {
				this.$set(this.itemIds[index].item, 'isSelect', !this.itemIds[index].item.isSelect)
			},
			editCartData(goods_id, consumption, callback) {
				let self = this
				uni.showLoading({
					title: ''
				});
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/editCartData',
					method: 'POST',
					data: {
						consumption: consumption,
						goods_id: goods_id
					},
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							callback(true)
							uni.hideLoading();
						} else {
							callback(false)
							uni.hideLoading();
						}
					},
					fail: function(err) {
						callback(false)
						uni.hideLoading();
					}
				})
			},
			editCartNumber(obj) {
				let index = obj.index
				let type = obj.type
				if (type == 'add') {
					if (this.itemIds[index].count >= 5) {
						let params = {
							type: 'default',
							message: "商品数量已到达最大了哟",
						}
						this.$refs.uToast.show({
							...params
						})
						return;
					}
					let count = this.itemIds[index].count
					let goods_id = this.itemIds[index].item.goods_id
					this.editCartData(goods_id, count + 1, res => {
						if (res) {
							this.itemIds[index].count++
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: "增加失败",
							})
						}
					})
				} else {
					if (this.itemIds[index].count <= 1) {
						let params = {
							type: 'default',
							message: "商品数量已到达最小了哟",
						}
						this.$refs.uToast.show({
							...params
						})
						return;
					}
					let count = this.itemIds[index].count
					let goods_id = this.itemIds[index].item.goods_id
					this.editCartData(goods_id, count - 1, res => {
						if (res) {
							this.itemIds[index].count--
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: "减少失败",
							})
						}
					})
				}

			},
			getCartData() {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/getCartData',
					method: 'GET',
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.isShow = false
							self.itemIds = res.data.data.itemIds
							self.itemIds.forEach((good, index) => {
								self.$set(self.itemIds[index].item, 'isSelect', true)
								let list = self.itemIds[index].item.multi_service_bargins.first
								for (var i = 0; i < list.length; i++) {
									for (var j = 0; j < list[i].service_info.length; j++) {
										self.$set(list[i].service_info[j], 'isSelect', false)
									}
								}
								let packageList = self.itemIds[index].item.packageList
								if (packageList.length !== 0) {
									for (var i = 0; i < packageList.length; i++) {
										if (self.itemIds[index].item.packageList[i]
											.is_default_select) {
											self.$set(self.itemIds[index].item.packageList[i],
												'isSelect',
												true)
										} else {
											self.$set(self.itemIds[index].item.packageList[i],
												'isSelect',
												false)
										}
									}
								}
							})
						} else if (res.statusCode == 401) {
							self.isShow = true
						}
					},
					fail: function(err) {

					}
				})
			},
			toProDatail(item) {
				let itemId = item.data.goods.itemId
				uni.navigateTo({
					url: `/subPage/proddetail/proddetail?id=${itemId}`
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login-view/login-view'
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			get_merge_rec(flag) {
				this.$request.get('/get_merge_rec', {
					pageIdx: this.pageIdx,
				}).then((res) => {
					let list = res.data.data.recommendList
					if (flag) {
						this.recommendList = this.recommendList.concat(list)
					} else {
						this.recommendList = list
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onShow() {
			// let isLogin = uni.getStorageSync('isLogin')
			// if (!isLogin || isLogin == 'no') {
			// 	this.isShow = true
			// } else {
			// 	this.getCartData()
			// 	this.isShow = false
			// }
			this.getCartData()
			this.get_merge_rec()
		}
	}
</script>
<style lang="scss" scoped>
	view {
		line-height: 1.15;
		box-sizing: border-box;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	}

	.app-header-wrapper {
		background-color: rgb(255, 255, 255);
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 50%;
		width: 7.2rem;
		transform: translateX(-50%);
		border-bottom: .02rem solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: .88rem;
		color: #666;
		padding: 0;
		transition: transform .2s ease-out;

		&>view {
			display: flex;
			align-items: center;
		}

		.app-header-item {
			display: block;
			width: 0.6rem;
			margin: 0 0.2rem;
		}

		.app-header-left {

			.app-header-item {

				.icon-back {
					width: 0.5rem;
					height: 0.5rem;
					line-height: .6rem;

					image {
						width: 0.5rem;
						height: 0.5rem;
					}
				}
			}
		}

		.app-header-middle {
			flex: 1;
			text-align: center;
			min-width: 0;

			.app-header-title {
				color: rgba(0, 0, 0, 0.8);
				font-size: .35rem;
				font-weight: 600;
				width: 100%;
			}
		}

		.app-header-right {
			min-width: 1rem;
			color: rgb(0, 0, 0);
			font-size: .288rem;
		}
	}

	.app-view {
		background-color: rgb(243, 243, 243);
		padding-top: .88rem;
		padding-bottom: 1.34rem;

		.login-head {
			background-color: rgb(243, 243, 243);
			padding: .2rem .24rem;

			.login-inner {
				background-color: rgb(255, 255, 255);
				border-radius: .16rem;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				padding: .28rem .24rem;

				.inner-left {
					color: rgba(0, 0, 0, 0.9);
					font-size: .3rem;
				}

				.inner-right {
					color: rgba(0, 0, 0, 0.5);
					font-size: .25rem;
					margin-right: .14rem;

					image {
						height: .4rem;
						width: .4rem;
						margin-top: .038rem;
					}
				}
			}
		}
	}

	.cart-view {
		box-sizing: border-box;
		height: 5.4rem;
		background-color: rgb(244, 244, 244);
		padding: .8rem 0;

		.btn {
			border: .02rem solid rgb(178, 178, 178);
			border-radius: .3rem;
			height: .6rem;
			box-sizing: border-box;
			padding: .14rem .4rem;
			color: rgba(0, 0, 0, 0.5);
			font-size: .25rem;
			margin-top: .4rem;
		}

		/deep/.u-empty {
			image {
				width: 2.4rem !important;
				height: 2.4rem !important;
			}
		}
	}

	.title-head {
		flex-direction: row;
		height: .42rem;
		display: flex;
		margin-bottom: .125rem;
		margin-top: .4rem;


		.h {
			height: .0288rem;
			width: .25rem;
			position: relative;

			.bg-l {
				background-image: url(../../static/images/rec_header_left.png);
			}

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
			}

			.bg-r {
				background-image: url(../../static/images/rec_header_right.png);
			}
		}

		.m {
			color: rgb(0, 0, 0);
			font-size: .33rem;
			font-weight: bold;
			padding: 0 .096rem;
		}
	}

	.good-view {

		.view-data {
			display: flex;
			flex-wrap: wrap;
			padding: .22rem;
			justify-content: space-between;
			padding-top: .2rem;
			padding-bottom: 0;


			.view-item {
				overflow: hidden;
				background-color: rgb(255, 255, 255);
				border-radius: .16rem;
				height: 5.3rem;
				width: 3.3rem;
				margin-bottom: .2rem;

				.img-box {
					height: 3.3rem;
					width: 3.3rem;

					image {
						height: 3.3rem;
						width: 3.3rem;
					}
				}

				.info-box {
					height: 2rem;
					padding-right: .2rem;
					padding-left: .2rem;

					.name {
						max-width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						height: .75rem;
						margin-top: .124rem;
						color: rgba(0, 0, 0, 0.9);
						font-size: .288rem;
						font-weight: bold;
						line-height: .36rem;
						vertical-align: middle;
					}

					.tags {
						height: .28rem;
						justify-content: flex-start;
						margin-top: .077rem;

						.tags-item {
							box-sizing: border-box;
							display: inline-block;
							background-color: rgb(255, 255, 255);
							border-radius: .038rem;
							border: .02rem solid rgb(255, 89, 0);
							flex-direction: row;
							height: .28rem;
							color: rgb(255, 89, 0);
							font-size: .2rem;
							margin-right: .058rem;
							padding: 0 .03rem;
						}
					}

					.price {
						height: .38rem;
						justify-content: space-between;
						margin-right: .21rem;
						margin-top: .2rem;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.9);

						.cur {
							font-size: .21rem;
						}

						.num {
							font-size: .32rem;
						}

						.qi {
							font-size: .17rem;
						}

						.del {
							color: rgb(175, 175, 175);
							font-size: .22rem;
							margin-bottom: .02rem;
							margin-left: .1rem;
							text-decoration-line: line-through;
						}
					}
				}
			}
		}
	}

	.pay-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgb(255, 255, 255);
		height: 1.32rem;
		z-index: 100;
		justify-content: space-between;

		.pay-bottom-left {
			justify-content: space-between;
			flex: 1;

			.bottom-left {
				padding-left: .24rem;

				.icon {
					height: .4rem;
					margin-right: 0.096rem;
					width: .4rem;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.all {
					color: rgba(0, 0, 0, 0.9);
					font-size: .25rem;
					font-weight: bold;
					margin-right: 0.096rem;
				}
			}

			.bottom-right {
				align-items: flex-end;
				flex-direction: column;

				.bottom-right-t {
					line-height: 1.6;
					justify-content: flex-end;

					.right-t-l {
						color: rgba(0, 0, 0, 0.9);
						font-size: 0.25rem;
						font-weight: 400;
					}

					.right-t-m {
						color: rgba(0, 0, 0, 0.5);
						font-size: 0.211rem;
						margin-right: 0.038rem;
						font-weight: 400;
					}

					.right-t-r {
						.cur {
							color: rgb(255, 89, 0);
							font-size: 0.23rem;
							font-weight: 500;
							margin-top: 0.038rem;
						}

						.price-r {
							color: rgb(255, 89, 0);
							font-size: 0.33rem;
							font-weight: 500;
							line-height: 0.46rem;
						}
					}
				}

				.bottom-right-b {
					line-height: 1.6;

					.b-inner {
						.b-inner-l {
							color: rgba(0, 0, 0, 0.5);
							font-size: 0.25rem;
						}

						.b-inner-r {

							text {
								color: rgb(255, 89, 0);
								font-size: 0.25rem;
								margin-left: 0.077rem;
							}

							image {
								height: 0.058rem;
								margin-left: 0.038rem;
								width: 0.125rem;
							}
						}
					}
				}
			}
		}

		.pay-bottom-right {
			margin-left: 0.163rem;

			.pay-bottom-right-btn {
				background: linear-gradient(to right, rgb(255, 89, 52), rgb(255, 125, 0));
				border-radius: 0.44rem;
				height: 0.844rem;
				margin: 0.163rem;
				width: 1.88rem;
				font-size: 0.33rem;
				font-weight: 500;
				padding-right: 0.038rem;
				padding-left: 0.038rem;
				color: rgb(255, 255, 255)
			}

			.tow-btn {
				margin-right: .2rem;

				.tow-btn-l {
					min-width: 1.66rem;
					padding-right: 0.24rem;
					padding-left: 0.24rem;
				}

				.tow-btn-l,
				.tow-btn-r {
					border: 0.019rem solid rgba(0, 0, 0, 0.3);
					border-radius: 0.278rem;
					height: 0.566rem;
					color: rgba(0, 0, 0, 0.5);
					font-size: 0.288rem;
				}

				.tow-btn-r {
					margin-left: 0.278rem;
					min-width: 1.66rem;
					padding-right: 0.24rem;
					padding-left: 0.24rem;
				}
			}
		}
	}
</style>